<template>
  <div class="footer-container">
    <div class="footer-bottom">
      <div class="footer-bottom-left">
        <div class="section-title">
          <span>关于我们</span>
        </div>
        <div class="partner-pc"  style="margin-top: 13px;">
          <span>北京回泰科技服务有限公司成立于2015年8月,</span>
          <span>
            是专门从事外贸进出口数据查询和提供数据分析及商业决策的国际经贸类大数据平台。
          </span>

          <span>
            我司拥有独立数据库及软件产品。贸易统计数据涵盖全球范围内10亿+国际贸易相关的数据信息，
          </span>
          <span>包含300多个国家和国际组织数据,</span>
          <span>HS海关代码8000多种货物商品贸易统计数据。</span>
          <span>
            由多领域资深数据专家组成的分析团队为政府、高校、研究机构提供精准数据及分析支持。
          </span>
        </div>
      </div>
      <div class="footer-bottom-right">
        <div class="section-title">
          <span>联系我们</span>
        </div>
    

        <img src="../assets/xwimg/news.jpg" alt=""  />
          <span>电话:010-67866071</span>
        <span>地址:北京市通州区北京北投台湖产业园2层</span>
      
      
      </div>
    </div>
    <div class="" style="height: 80px; background-color: #2b2e36; display: flex; flex-direction: column; align-items: center; justify-content: center">
  <p style="color: #aaa; font-size: 15px;">©2015-2025 星网数据</p>
  <div style="width: 35%; display: flex; justify-content: space-between">
    <a 
      href="https://beian.miit.gov.cn/" 
      target="_blank" 
      rel="noopener" 
      style="color: #67f5b1; font-size: 13px; text-decoration: none;"
    >
      京ICP备2024092112号
    </a>
    <a 
      href="https://beian.mps.gov.cn/#/query/webSearch"
      target="_blank"
      rel="noopener"
      style="color: #67f5b1; font-size: 13px; text-decoration: none;"
    >
      京公网安备11011502038596号
    </a>
    <a 
      href="https://tsm.miit.gov.cn/#/home" 
      target="_blank" 
      rel="noopener" 
      style="color: #67f5b1; font-size: 13px; text-decoration: none;"
    >
      增值电信业务经营许可证:京B2-20251656
    </a>
  </div>
</div>
  </div>
</template>

<script setup>
import { ref } from "vue";

</script>

<style lang="scss" scoped>
.footer-container {
  display: flex;
  flex-direction: column;

  .footer-bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    margin-top: 20px;
    height: 420px;
    background-image: url("../assets/xwimg/footerbg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
       .footer-bottom-left,
    .footer-bottom-right {
      display: flex;
      flex-direction: column;
      align-items: center;       /* 内部保持居中排列 */
      padding: 0 3%;
    }
    .footer-bottom-left {
      .section-title {
        position: relative;
        display: inline-block;
        font-size: 24px;
        color: #333;
        text-align: center;
        margin: 40px auto;
      }
      .section-title::before {
        content: "ABOUT US";
        position: absolute;
        top: -5px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 50px;
        color: rgba(0, 0, 0, 0.1);
        white-space: nowrap;
        font-weight: 800;
      }

      display: flex;
      align-items: center;
      flex-direction: column;
      .partner-pc {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 25px;
        span {
          font-size: 16px;
          font-weight: 500;
          line-height: 100%;
         
          color: #141618b8;
        }
      }
    }
    .footer-bottom-right {
      .section-title {
        position: relative;
        display: inline-block;
        font-size: 24px;
        color: #333;
        text-align: center;
        margin: 40px auto;

        &::before {
          content: "Contact Us";
          position: absolute;
        top: -5px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 50px;
        color: rgba(0, 0, 0, 0.1);
        white-space: nowrap;
        font-weight: 800;
        }
      }

      display: flex;
      flex-direction: column;
      padding: 0 3%;

      img {
        width: 190px;
        height: 190px;
        margin-bottom: 10px;
      }

      span {
        color: #151618b8;
        text-align: center;
        width: 100%;
        max-width: 400px;
      }
    }
  }
}
</style>